<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddConfig"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="handleDeleteConfig"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh-right"
          size="mini"
          @click="getConfigList"
        >刷新
        </el-button>
      </el-col>
    </el-row>

    <el-table style="margin-top: 18px" v-loading="loading" :data="configList" :border="true"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column
        label="id"
        align="center"
        prop="configId"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="是否启用"
        align="center"
        prop="configState"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.configState === '0'">启用</span>
          <span v-if="scope.row.configState === '1'">停用</span>
        </template>
      </el-table-column>
      <el-table-column
        label="配置名称"
        align="center"
        prop="configName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="数据库名"
        align="center"
        prop="dataBase"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="默认包路径"
        align="center"
        prop="packageName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="自动去除表前缀"
        align="center"
        prop="autoRemovePre"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.autoRemovePre === '0'">去除</span>
          <span v-if="scope.row.autoRemovePre === '1'">不去除</span>
        </template>
      </el-table-column>
      <el-table-column
        label="表前缀"
        align="center"
        prop="tablePrefix"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="忽略字段"
        align="center"
        prop="ignoreColumn"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="作者"
        align="center"
        prop="author"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="备注"
        align="center"
        prop="configRemark"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100" >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-lock"
            @click="handleEnableOrDisable(scope.row, 0)"
            v-if="scope.row.configState === '1'" >启用
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-lock"
            @click="handleEnableOrDisable(scope.row, 1)"
            v-if="scope.row.configState === '0'" >停用
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit-outline"
            @click="handleUpdateConfig(scope.row)" >修改
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDeleteConfig(scope.row)" >删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <add-config-from ref="addConfigFrom" @ok="handleAdd"/>

  </div>
</template>

<script>

import genApi from "@/api/gen";
import AddConfigFrom from "@/views/genConfig/addConfigFrom.vue";

export default {
  name: "GenConfig",
  components: {AddConfigFrom},
  data() {
    return {
      configList: [],
      queryParams: {},
      loading: false,
      ids: []
    }
  },
  created() {
    this.getConfigList()
  },
  methods: {
    getConfigList() {
      this.loading = true;
      genApi.getConfigList(this.queryParams).then(response => {
          this.configList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    handleEnableOrDisable(row, state) {
      row.configState = state
      genApi.changeConfigState(row).then(response => {
        this.getConfigList()
      })
    },
    handleAddConfig() {
      this.$refs.addConfigFrom.show();
    },
    handleAdd() {
      this.getConfigList()
    },
    handleUpdateConfig(row) {
      this.$refs.addConfigFrom.show(row)
    },
    handleDeleteConfig(row) {
      const tableIds = row.configId || this.ids;
      if (tableIds.length === 0) {
        this.$message.info("请先选择需要删除的记录")
      } else {
        genApi.deleteConfig(tableIds).then(response => {
          if (response.code === 200) {
            this.$message.success(response.msg)
            this.getConfigList()
          }
        })
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.configId);
      this.tableNames = selection.map(item => item.tableName);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  }
}
</script>

